<template>
    <div :class="[prefixCls+'-steps-area']">
        <div :class="[prefixCls+'-steps']">
            <div :class="[[prefixCls+'-steps-item'],
          { 'finished': current > n,
            'process': current === n && n !== totalSteps,
            'last-process': current === totalSteps && n === totalSteps,
            'middle-wait': current < n && n !== totalSteps,
            'last-wait': current < n && n === totalSteps,
          }
        ]" v-for="n in totalSteps" :key="n" @click="onChange(n)" :style="$listeners.change?'cursor:pointer;':''">
                <div :class="[prefixCls+'-steps-icon-custom']" v-html="stepsIcon[n-1]" v-if="stepsIcon != ''"></div>
                <div :class="[prefixCls+'-steps-icon']" v-else>
                    <span class="u-icon" v-if="current<=n">{{ n }}</span>
                    <span class="u-icon" v-else><i class="icon icon-success"></i></span>
                </div>
                <div :class="[prefixCls+'-steps-content']">
                    <div :class="[prefixCls+'-steps-title']">{{ stepsLabel[n-1] || 'Step ' + n }}</div>
                    <div :class="[prefixCls+'-steps-description']" v-if="stepsDesc!=''">{{ stepsDesc[n-1] || 'Desc ' + n }}</div>
                </div>
            </div>
        </div>
        <slot></slot>
    </div>
</template>
<script>
import { prefixCls } from '../prefix'
import './steps.css';

export default {
    name: `${prefixCls}Steps`,
    props: {
        stepsLabel: { // 步骤title数组
            type: Array,
            default: () => {
                return []
            }
        },
        stepsDesc: { // 步骤description数组
            type: Array,
            default: () => {
                return []
            }
        },
        totalSteps: { // 总的步骤数
            type: Number,
            default: 3
        },
        currentStep: { // 当前选中的步骤
            type: Number,
            default: 1
        },
        stepsIcon: { // 自定义icon
            type:Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            prefixCls: prefixCls,
            // 若当前选中步骤超过总步骤数，则默认选择步骤1
            current: this.currentStep > this.totalSteps ? 1 : this.currentStep,
        }
    },
    watch: {
        currentStep(val) {
            this.current = val
        }
    },
    methods: {
        onChange(index) { // 点击切换选择步骤
            if (this.$listeners.change) {
                // console.log('监听到上层事件')
                if (this.current !== index) {
                    this.$emit('change', index)
                }
            } 
        }
    }
}
</script>
